<template>
  <!-- 页面-角色管理-分配菜单 -->
  <div style="height: 460px;">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form :model="roleForm" slot="adaption-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <!-- 角色编码 -->
        <Form-item prop="roleCode" :label="$t('module.role.roleCode')">
          <Input type="text" v-model="roleForm.roleCode" disabled />
        </Form-item>
        <!-- 角色名称 -->
        <Form-item prop="roleName" :label="$t('module.role.roleName')">
          <Input type="text" v-model="roleForm.roleName" disabled />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="menuTable" :config="menuTableConfig">
      <div slot="table-bar">
        <RPButton :text="$t('module.role.assMeau')" optType="create" @click="add" />
        <RPButton optType="batch" @click="deleted()" />
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import RoleSelectMenu from './RoleSelectMenu.vue'
import roleAPI from '@/api/roleApi.js'
import valueSetAPI from '@/api/valueSetAPI.js'
import { roleAssignMenuColumns } from './columns.js'
import locales from './locales.js'

export default {
  mixins: [locales],
  props: {
    roleId: {
      type: String,
      default() {
        return ''
      }
    },
    roleName: {
      type: String,
      default() {
        return ''
      }
    },
    roleCode: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      runSearchTimes: 0,
      roleForm: {
        roleName: this.roleName,
        roleCode: this.roleCode
      },
      menuTypeList: {}
    }
  },
  computed: {
    menuTableConfig() {
      return {
        loadDataFn: this.queryAssignedMenu,
        initParam: { roleId: this.roleId },
        columnsFn: roleAssignMenuColumns.bind(this),
        isPage: true,
        autoFirst: false,
        rowClassNameFn: this.rowClassName // 自定义行样式
      }
    }
  },
  created: function() {
    // 初始化
    this.initMenuType()
    this.$emit('SetTitle', this.$t('module.menuManage.titleAssignMenu'))
    this.$emit('SetPageWidth', 706)
    this.$emit('SetPageActions', [
      {
        text: this.$t('common.close'),
        theme: 'primary',
        handle: () => {
          this.$emit('Close', this.runSearchTimes > 1) //粗略使用次数判断是否有变动, search次数大于1时,认为有变动.
        }
      }
    ])
  },
  methods: {
    // 自定义行样式
    rowClassName(row) {
      //enabled:1-有效；0-无效
      let effectiveTime = this.$root.$options.filters['effective-time'](row.effectBegin, row.effectEnd)
      if (row.enabled == 0 || effectiveTime == false) {
        return 'tableDisableStyle'
      }
    },
    // 初始化菜单类型
    initMenuType() {
      valueSetAPI.getValueSetByCode('SYS_MENU_TYPE').then(data => {
        // 查询列表
        this.search()
        // 设置菜单类型
        for (const menuType of data) {
          this.menuTypeList[menuType.vsiKey] = menuType.vsiValue
        }
      })
    },
    // 获取表格列表数据
    queryAssignedMenu({ responseProcess, param }) {
      roleAPI.queryAssignedMenu(param).then(data => {
        data.records.forEach(menu => {
          menu.menuTypeName = this.menuTypeList[menu.menuType]
        })
        responseProcess(data)
      })
    },
    search(page = 1) {
      ++this.runSearchTimes
      this.$refs['menuTable'].load({ roleId: this.roleId }, page)
    },
    // 添加
    add() {
      new this.$pageModal(
        RoleSelectMenu,
        {
          props: {
            roleId: this.roleId,
            menuTypeList: this.menuTypeList
          }
        },
        data => {
          data && this.search()
        }
      )
    },
    // 删除
    deleted() {
      let selectedIds = this.getSelectedIds()
      if (selectedIds.length == 0) {
        this.$message.error({
          content: this.$t('module.menuManage.warning.selectMenu')
        })
        return
      }

      new $confirm(this.$t('module.role.warning.ensureToDelete'), this).then(() => {
        roleAPI.deleteAssignedMenu(selectedIds).then(data => {
          this.search()
          this.$message.success({
            content: this.$t('module.orgManage.deleteSuccess'),
            duration: 3
          })
        })
      })
    },
    getSelectedIds() {
      let list = this.$refs['menuTable'].getSelectioned() || []
      let ids = []
      for (let row of list) {
        ids.push(row.id)
      }
      return ids
    }
  },
  watch: {},
  directives: {}
}
</script>
